<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>尺寸轮廓属性</title>

    <style type="text/css">
        #div1{
            /*
            display   inline   div 来说是默认块级显示独占一行,可以改成行级和其他内容在一行中显示
            outline  可以通过这一个属性来设置多个值 比如线的粗细,样式 颜色
             */
            height: 100px;
            width: 500px;
            display: block;
            outline-style: solid;
            outline-width: 10px;
            outline-color: green;
            /*outline: 10px dashed red;*/

        }

    </style>
</head>
<body>


<div id="div1">
    块状元素,独占一行,吴亦凡在上海之三两事,刚到上海没有钥匙,喊她去吃饭, 吃的小龙虾和牛蛙,那个时候的吴亦凡还没有过敏
    直到有一天吴亦凡自己吃独食中午点了一份外卖,里面有虾,自己吃完就过敏了,从那以后就开始过敏,然后我们坚持一周至少聚餐一次吃小龙虾

</div>

<span id="span1">行级元素,多个元素可以在一行里面</span>
<span id="span2">行级元素,多个元素可以在一行里面发士大夫撒的发</span>

</body>
</html>